<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>机试测试练习</title>
    <style>
        /* CSS实现三角形 */
        #sjx1{
            width: 0;
            height: 0;
            border-top: 100px solid pink;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }
        #sjx2{
            width: 100px;
            height: 100px;
            background: linear-gradient(45deg,pink 50%,transparent 50%);
        }
        #sjx3{
            font-size: 100px;
            color: pink;
        }
        #sx1{
            width: 100px;
            height: 100px;
            border-radius:100px 0 0;
            background-color: pink;
        }
        #sx2{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(90deg,pink 50%,transparent 50%);
        }
    </style>
</head>
<body>
    <h1>机试测试练习</h1>
    <button onclick="jieliu(ok,2*1000)">节流</button>
    <button onclick="fangdou(ok,2*1000)">防抖</button>
    <h2>双向绑定</h2>
    <input type="text" id="input" oninput="havemodel()"/>
    <b id="msg"></b>
    <h2>css实现三角形</h2>
    <div id="sjx1">三角形1</div>
    <div id="sjx2">三角形2</div>
    <div id="sjx3">&#9660;</div>
    <h2>css实现扇形</h2>
    <div id="sx1">扇形1</div>
    <div id="sx2">扇形2</div>
    <script>
        /**
         * 数组柯里化
         */
         function add() {
            // 将arguments参数数组转化为真正的数组
            var args = Array.prototype.slice.call(arguments) // 其实这里有想过直接给args附一个[],但是这样的话，就接收不到add的第一个参数，所以这里要将args的this指向参数数组arguments
            var _addArgs = function () {
                args.push(...arguments)
                return _addArgs
            }
                // 利用函数和字符串拼接时会隐式调用toString方法，重写toString方法返回参数数组相加方法
            _addArgs.toString = function () {
                return  args.reduce(function (a, b) { return a + b },0)
                // reduce让数组内的每一个元素都执行一次回调函数，第一个参数a代表上次回调的返回值或初始值，b代表当前被处理的函数，这里的0就是初始值
            } 

            return _addArgs;
        }
        const a = add(1)(2)(4);
        console.log(''+a)

        /**
         * 节流和防抖
         */
        function ok(){
            console.log("事件");
        }
         //节流【当触发了事件后，在指定时间内再次触发无效，只有触发之后才能重新点击触发】
        var time=null;
        function jieliu(fun,miao){
            if(time)return;
            time=setTimeout(() => {
                fun();//调用函数
                clearTimeout(time);
                time=null;    
            }, miao);
        }
        var time1=null;
        //防抖【当触发事件再次点击会重置触发时间....】
        function fangdou(fun,miao){
            if(time1){
                clearTimeout(time1);
                time1=null;
            }
            time1=setTimeout(() => {
                fun();//调用
                clearTimeout(time1);
                time1=null;    
            }, miao);
        }

        /**
         * Prmise篇
         */
        //手写Promise.race
        Promise.myrace=function(arg){
            return new Promise((resolve,reject)=>{
                for(let i=0;i<arg.length;i++){
                    return arg[i].then(resolve,reject);
                }
            })
        }
        //手写Promise.all
        Promise.myall=function(arg){
            let count=0;
            let arr=new Array();
            return new Promise((resolve,reject)=>{
                arg.forEach((element,i) => {
                    Promise.resolve(element).then((res)=>{
                        arr[i]=res;
                        count++;
                        if(count===arg.length){
                            resolve(arr)
                        }
                    }).catch(err=>reject(err))
                });
            })
        }
        /**
         * 扁平化【将多维数组转为一维数组】
         */
        function bph1(arr){
            return arr.toString.split(",");
        }
        function bph2(arr){
            return arr.join(",").split(",");
        }
        function bph3(arr){
            let newarr=[];
            arr.map(item=>{
                if(Array.isArray(item)){
                    newarr=newarr.concat(bph3(item));
                }else{
                    newarr.push(item)
                }
            })
            return newarr;
        }
        /**
         *js实现双向绑定 【利用Object.defineProperty】
         */
        let sj={
            text:"default"
        }
        let input=document.getElementById("input");
        let text=document.getElementById("msg");
        Object.defineProperty(sj,'text',{
            set(newval){
                input.value=newval;
                text.innerText=newval;
            }
        })
        function havemodel(){
            sj.text=input.value;
        }
    </script>
</body>
</html>